import React, { Component } from 'react';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import EapParamsForm from './hdForms/EapParamsForm';
import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';

@connect(({ produce, es }) => ({ produce, es }))
@Form.create()
class EapSocket extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    userId: '',
  };

  callback = key => {
    if (key == 1) {
      const { dispatch } = this.props;
      dispatch({
        type: 'es/getEapParams',
      });
    }
  };

  // 关闭远程讯息提示框
  closeCimMessageModel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/closeCimMessageModel',
    });
  };

  // 清空前端要显示的消息
  clearMsgShow = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/clearMsgshow',
    });
  };

  connectEap = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/connectEap',
    });
  };

  disConnectEap = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/disconnectEap',
    });
  };

  updateUserId = () => {
    const { dispatch } = this.props;
    const { userId } = this.state;
    dispatch({
      type: 'es/updateUserId',
      payload: userId,
    });
  };

  user_login = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/userLogin',
    });
  };

  user_logout = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'es/userLogout',
    });
  };

  keepCimMessage = () => {
    const { dispatch } = this.props;
    const { cimMessageNumber, cimMessageInfo } = this.state;
    dispatch({
      type: 'es/keepCimMessage',
      payload: [cimMessageNumber, cimMessageInfo],
    });
  };

  closeLoginHintModal = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'hd/closeLoginHintModal',
    });
  };

  render() {
    const Panel = Collapse.Panel;
    const {
      serverEapParams,
      eapConnect,
      eapMsg,
      cimMessageVisible,
      cimMessage,
      userIdserver,
      userLogin,
      loginHintVisible,
      loginHint,
    } = this.props.es;
    const gridStyle1 = {
      width: '35%',
      textAlign: 'left',
    };
    const gridStyle2 = {
      width: '65%',
      textAlign: 'left',
    };

    const timeitem = [];
    for (let i = 0; i < eapMsg.length; i++) {
      let head = eapMsg[i][0];
      let info = eapMsg[i][1];
      let colorUsed;
      if (head.includes('从EAP接收到消息')) {
        colorUsed = 'red';
      } else {
        colorUsed = 'green';
      }
      timeitem.push(
        <Timeline.Item color={colorUsed} key={head}>
          <p>{head}</p>
          <p>{info[0]}</p>
          <p>{info[1]}</p>
          <p>{info[2]}</p>
        </Timeline.Item>
      );
    }

    return (
      <>
        <Card
          title="EAP连接状态"
          style={{ marginLeft: 256 }}
          extra={
            <>
              <span style={{ marginRight: 10 }}>远程讯息编号:</span>
              <Input
                style={{ width: 100, marginRight: 10 }}
                onChange={e => this.setState({ cimMessageNumber: e.target.value })}
              />
              <span style={{ marginRight: 10 }}>远程讯息对应的内容:</span>
              <Input
                style={{ width: 100, marginRight: 10 }}
                onChange={e => this.setState({ cimMessageInfo: e.target.value })}
              />
              <Button style={{ marginRight: 10 }} onClick={this.keepCimMessage}>
                保存远程讯息
              </Button>
            </>
          }
        >
          <Card.Grid style={gridStyle1}>
            状态：{' '}
            {eapConnect ? (
              <font style={{ color: '#00FF00', fontSize: 18 }}>已连接</font>
            ) : (
              <font style={{ color: '#FF0000', fontSize: 18 }}>已断开</font>
            )}{' '}
            <Button onClick={this.connectEap} style={{ marginLeft: 50 }}>
              连接EAP
            </Button>
            <Button onClick={this.disConnectEap} style={{ marginLeft: 30 }}>
              关闭EAP连接
            </Button>
          </Card.Grid>
          <Card.Grid style={gridStyle2}>
            当前员工id: &nbsp;&nbsp; <span> {userIdserver} </span>
            <Input
              disabled={userLogin}
              onChange={e => this.setState({ userId: e.target.value })}
              style={{ width: 100, marginLeft: 10 }}
            />
            <Button style={{ marginLeft: 10, marginRight: 15 }} onClick={this.updateUserId}>
              更新员工ID
            </Button>
            员工上下岗状态：{' '}
            {userLogin ? (
              <font style={{ color: '#00FF00', fontSize: 18 }}>上岗中</font>
            ) : (
              <font style={{ color: '#FF0000', fontSize: 18 }}>下岗中</font>
            )}{' '}
            <Button onClick={this.user_login} style={{ marginLeft: 10 }}>
              上岗
            </Button>
            <Button onClick={this.user_logout} style={{ marginLeft: 30 }}>
              下岗
            </Button>
          </Card.Grid>
        </Card>
        <Collapse onChange={this.callback} style={{ marginLeft: 256 }}>
          <Panel header="EAP通信参数设置" key="1">
            <EapParamsForm serverThresData={serverEapParams} />
          </Panel>
        </Collapse>
        <Card
          key="123"
          title={<font style={{ color: '#2222FF', fontSize: 18 }}>设备和EAP通信消息显示</font>}
          style={{ marginLeft: 256 }}
          extra={
            <>
              <Button style={{ marginRight: 100 }} onClick={this.clearMsgShow}>
                清空消息
              </Button>
            </>
          }
        >
          <Timeline>{timeitem}</Timeline>
        </Card>

        <Modal
          title={'EAP远程讯息提示框'}
          visible={cimMessageVisible}
          width={window.screen.availWidth - 700}
          closable={false}
          footer={[
            <Button type="primary" onClick={this.closeCimMessageModel}>
              关闭远程讯息提示框
            </Button>,
          ]}
        >
          <p>{cimMessage}</p>
        </Modal>

        <Modal
          title={'员工上下岗信息提示框'}
          visible={loginHintVisible}
          width={window.screen.availWidth - 700}
          closable={false}
          footer={[
            <Button type="primary" onClick={this.closeLoginHintModal}>
              关闭员工上下岗信息提示框
            </Button>,
          ]}
        >
          <p>{loginHint}</p>
        </Modal>
      </>
    );
  }
}
export default EapSocket;
